export default {
    computed: {
        contentHeight() {
            return this.filteredData.length * this.itemHeight
        }
    },
    watch: {
        filteredData() {
            this.handleScroll()
        }
    },
    mounted() {
        this.update()
    },
    data() {
        return {
            itemHeight: 30,
            virtualList: []
        }
    },
    methods: {
        update(scrollTop = 0) {
            const count = Math.ceil(this.$el.clientHeight / this.itemHeight)
            const start = Math.floor(scrollTop / this.itemHeight)
            const end = start + count
            this.virtualList = this.filteredData.slice(start, end)
            this.$refs.content.style.webkitTransform = `translate3d(0, ${start * this.itemHeight}px, 0)`
        },
        handleScroll (e) {
            const scrollTop = this.$refs.container.scrollTop
            this.update(scrollTop)
          }
    },
}